<template>
    <!-- <el-dropdown @command="onLanguageChange">
            <div class="language-selector">
                {{ currentLanguage }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="en-US">EN</el-dropdown-item>
                    <el-dropdown-item command="zh-CN">ZH</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown> -->

    <div class="cursor-pointer">
        <img src="./imgs/cn.svg" v-if="langStore.lang == 'zh-CN'" @click="onLanguageChange('en-US')" />
        <img src="./imgs/en.svg" v-else @click="onLanguageChange('zh-CN')" />
    </div>
</template>

<script setup lang="ts">
import { useLangStore } from '@/stores/lang';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const langStore = useLangStore();

const emits =  defineEmits(['colsed']);

const onLanguageChange = (language: string) => {
    langStore.setLang(language);
    locale.value = language;
    emits('colsed');
};
</script>

<style scoped lang="scss">
.box {
    min-width: 60px;
}
</style>

<style>
:focus-visible {
    outline: none !important;
}
</style>
